<template>
  <a-form-item :label="item.label" :name="item.key" class="dynamic-form-item">
    <!-- 输入框 -->
    <a-input v-if="item.type === '输入框'" v-bind="$attrs" class="w-48" placeholder="请输入" />
    <!-- 选择框 -->
    <a-select
      v-else-if="item.type === '下拉框' || item.type === '多选下拉框'"
      :mode="item.type === '多选下拉框' ? 'multiple' : null"
      v-bind="$attrs"
      :max-tag-count="2"
      class="!w-48"
      :options="options"
      placeholder="请选择"
    />
    <!-- 日期选择器 -->
    <a-date-picker v-else-if="item.type === '长日期'" v-bind="$attrs" class="w-48" show-time format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss" />
    <a-date-picker v-else-if="item.type === '短日期'" v-bind="$attrs" class="w-48" format="YYYY-MM-DD" value-format="YYYY-MM-DD" />

    <!-- 日期范围选择器 -->
    <a-range-picker
      v-else-if="item.type === '长日期范围'"
      v-bind="$attrs"
      class="!w-96"
      show-time
      format="YYYY-MM-DD HH:mm:ss"
      value-format="YYYY-MM-DD HH:mm:ss"
    />
    <a-range-picker v-else-if="item.type === '短日期范围'" v-bind="$attrs" :default-value="[]" class="!w-80" format="YYYY-MM-DD" value-format="YYYY-MM-DD" />
    <span v-else>未知控件类型</span>
  </a-form-item>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import { post } from '@/utils/request'

defineOptions({
  inheritAttrs: false
})
const props = defineProps({
  item: {
    type: Object,
    required: true
  }
})
const options = ref([])
onMounted(async () => {
  if (['下拉框', '多选下拉框'].includes(props.item.type) && props.item.dictId) {
    const { code, data } = await post('/ufs/dict/getDictDataList', { id: props.item.dictId })
    if (code !== 0) return
    options.value = data.map((item) => {
      return {
        label: item.dictValue,
        value: item.dictKey
      }
    })
  }
})
</script>
<style lang="less" scoped>
.dynamic-form-item {
  :deep(.ant-form-item-label) {
    margin-left: 16px;
  }
  .ant-picker {
    width: 100%;
  }
}
</style>
